<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm" :inline="true" class="demo-form-inline">
      <el-form-item label="类别">
        <el-select v-model="searchForm.categoryId" filterable>
          <el-option
            v-for="item in serviceTypeList"
            :key="item.id"
            :label="item.categoryName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="searchForm.projectName" placeholder="请输入服务项目名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleRestSearch()">重置</el-button>
        <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button v-permission="['serve:project:add']" type="primary" @click="handleCreate()"
          >新增</el-button
        >
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column label="类别" prop="categoryName"></el-table-column>
      <el-table-column label="项目名称" prop="projectName"></el-table-column>
      <el-table-column label="工时费" prop="manHourAmount">
        <template #default="{ row }"> ¥{{ row.manHourAmount }} </template>
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template #default="{ row }">
          <el-tag :type="row.status === 1 ? 'primary' : 'danger'">{{
            row.status === 1 ? "启用" : "禁用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm
            title="你确定要删除该服务项目?"
            width="220"
            @confirm="handleDelete({ id: row.id })"
          >
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit()">
      <el-form ref="formRef" :model="form" label-width="120" :rules="rules">
        <el-form-item label="类别" prop="categoryId">
          <el-select v-model="form.categoryId" filterable>
            <el-option
              v-for="item in serviceTypeList"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称" prop="projectName">
          <el-input v-model="form.projectName" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="工时" prop="duration">
          <el-input
            v-model="form.duration"
            v-integer-number
            type="number"
            :min="1"
            placeholder="请输入工时"
            ><template #append>人.时</template></el-input
          >
        </el-form-item>
        <el-form-item label="工时费" prop="manHourAmount">
          <el-input
            v-model="form.manHourAmount"
            v-number
            type="number"
            :min="1"
            placeholder="请输入工时费用"
            ><template #append>元</template></el-input
          >
        </el-form-item>
        <el-form-item label="状态">
          <el-switch
            v-model="form.status"
            inline-prompt
            active-text="启用"
            inactive-text="禁用"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {
  getProjectTypeListApi,
  getServiceProjectApi,
  addServiceProjectApi,
  editServiceProjectApi,
  deleteServiceProjectApi
} from "@/api/repair";

// 表格
const {
  tableData,
  searchForm,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {
    categoryId: "",
    projectName: ""
  },
  getTableList: getServiceProjectApi,
  deleteData: deleteServiceProjectApi
});

// 新增编辑
const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      id: "",
      categoryId: "",
      projectName: "",
      duration: 1,
      manHourAmount: "",
      status: 1
    },
    rules: {
      categoryId: [{ required: true, message: "请选择类别", trigger: "change" }],
      projectName: [{ required: true, message: "请输入名称", trigger: "blur" }],
      duration: [{ required: true, message: "请输入工时", trigger: "blur" }],
      manHourAmount: [{ required: true, message: "请输入工时费", trigger: "blur" }]
    },
    createData: addServiceProjectApi,
    updateData: editServiceProjectApi,
    success: () => {
      handleGetTableList(currentPage.value);
    }
  }
);

// 获取项目分类列表
const serviceTypeList: any = ref([]);
const handleGetProjetType = async () => {
  const res = await getProjectTypeListApi();
  serviceTypeList.value = res as any;
};

onMounted(() => {
  handleGetProjetType();
});
</script>
<style scoped lang="scss">
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
